/**
 * @description  收益性表现（排名）
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Spin, Row, Col } from 'antd';
import { ThreeHeaderC } from '../../../components';
import style from './index.less';
import ShowBlock from './showBlock';

class ShowRanking extends PureComponent {
  constructor() {
    super();
    this.state = {};
  }

  componentDidMount() {
    const { dispatch, args } = this.props;
    dispatch({
      type: 'yieldPerformanceM/getRanking',
      payload: args,
    });
  }

  componentDidUpdate(prevProps) {
    const { dispatch, args } = this.props;
    if (JSON.stringify(args) !== JSON.stringify(prevProps.args)) {
      dispatch({
        type: 'yieldPerformanceM/getRanking',
        payload: args,
      });
    }
  }

  render() {
    const {
      yieldPerformanceM: { RankingData },
      loading,
    } = this.props;
    const data = RankingData.dataSource;

    return (
      <div>
        <Spin spinning={loading.effects['yieldPerformanceM/getRanking'] == true}>
          <ThreeHeaderC title='收益率排名' />
          <div className={style.block_Area} style={{ height: '378px' }}>
            <Row gutter={16}>
              {data && data.length
                ? data.map((item) => {
                    return (
                      <Col span={8} key={item.type}>
                        <ShowBlock data={item} />
                      </Col>
                    );
                  })
                : null}
            </Row>
          </div>
        </Spin>
      </div>
    );
  }
}
export default connect(({ yieldPerformanceM, loading }) => ({
  yieldPerformanceM,
  loading,
}))(ShowRanking);
